<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div style="min-height: 50px;background:#f7f7f7;line-height:50px;padding:0px 20px;color:#12bdce">
                    {{ $t("message.new") }}
                </div>
            </el-col>
        </el-row>
        <el-row style="padding-top:20px;padding:15px 0 0px 30px;" :gutter="20">
            <el-col :span="6">
                <div style="min-height: 35px;background:#f7f7f7;line-height:35px;color:#12bdce">
                    <el-button style="width:100%;background:#12bdce;border-color:#12bdce;color:#fff" @click="add()">
                        创建<i class="el-icon-plus el-icon--right"></i>
                    </el-button>
                </div>
            </el-col>
            <el-col :span="12">
                <div style="min-height: 35px;background:#f7f7f7;line-height:35px;color:#12bdce">
                    <span class="el-dropdown-link" @click="triggerFold" style="padding:1px 37px 1px 20px;color:#555">
                        筛选
                        <i v-if="isFold" class="el-icon-arrow-up el-icon--right"></i>
                        <i v-else class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="min-height: 35px;background:#f7f7f7;line-height:35px;color:#12bdce">
                    <el-input
                            placeholder="请输入新闻ID"
                            icon="search"
                            v-model="search"
                            @click="handleIconClick">
                    </el-input>
                </div>
            </el-col>
        </el-row>
        <el-row v-if="isFold" style="padding-top:10px;padding:15px 0 0px 30px;">
            <el-card class="box-card">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-select v-model="selectValue" placeholder="请选择资讯分类">
                            <el-option
                                    v-for="item in options"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-card>
        </el-row>
        <div style="padding-top:10px;padding:15px 0 30px 30px;">
            <el-table v-loading.body="loading"
                      :data="tableData"
                      border
                      style="width: 100%"
                      @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        inline-template
                        label="ID"
                        width="120">
                    <router-link :to="{ name: 'new_change', params:{ id: row.id }}">{{ row.id }}</router-link>
                </el-table-column>
                <el-table-column
                        prop="keywords"
                        label="关键字"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        inline-template
                        label="图片">
                    <img :src="row.img">
                </el-table-column>
            </el-table>
            <div style="text-align:right">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                search: '',
                isFold: false,//折叠板关闭
                options: [],
                selectValue: '',
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                tableData: [],
                multipleSelection: [],
                currentPage: 1,//当前页
                pageSize: 10,//每页显示个数
                total: 0,//总共记录
                loading: true,//正在加载
            }
        },
        methods: {
            handleIconClick(ev) {//搜索事件
                //this.loadNewList();
            },
            triggerFold(){//折叠板事件
                this.isFold = this.isFold ? false : true;
                if (!this.isFold) {//折叠板收起清空数据
                    this.selectValue = '';
                }
                else {
                    this.loadClassify();
                }
            },
            handleSelectionChange(val) {//table checkbox选择事件
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                var querys = {
                    page: this.currentPage,
                    rows: val
                }
                if (this.selectValue) {
                    querys.id = this.selectValue;
                }
                window.router.push({
                    path: "/new/list/",
                    query: querys
                })
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                var querys = {
                    page: val,
                    rows: this.pageSize
                }
                if (this.selectValue) {
                    querys.id = this.selectValue;
                }
                window.router.push({
                    path: "/new/list/",
                    query: querys
                })
                console.log(`当前页: ${val}`);
            },
            add(){//创建新闻
                window.router.push({path: "/new/add/"})
            },
            loadClassify() {//加载新闻分类
                this.$http.get('http://apis.baidu.com/tngou/info/classify').then((response) => {
                    var data = response.data;
                    this.options = data.tngou;
                }, (response) => {
                    this.$notify.error({
                        title: '错误',
                        message: '加载新闻分类错误'
                    });
                });
            },
            loadNewList() {//加载新闻列表
                this.loading = true;
                var page = this.currentPage;
                var rows = this.pageSize;
                var id = this.selectValue;
                var data = {"page":page,"rows":rows};
                if(id){
                    data.id = id;
                }
                this.$http.get('http://apis.baidu.com/tngou/info/list',{params:data}).then((response) => {
                    var data = response.data;
                    if (!data.status) {
                        this.$notify.error({
                            title: '错误',
                            message: '加载新闻列表错误'
                        });
                        this.loading = false;
                        return;
                    }
                    data.tngou.forEach(function (e) {
                        e.img = "http://tnfs.tngou.net/image" + e.img + "_100x100";

                    });
                    this.total = data.total;
                    this.tableData = data.tngou;
                    this.loading = false;
                }, (response) => {
                    this.loading = false;
                    this.$notify.error({
                        title: '错误',
                        message: '加载新闻列表错误'
                    });
                });
            }
        },
        created() {
            var id = this.$route.query.id;
            if(id){
                this.selectValue = parseInt(id);
                this.triggerFold();

            }
            this.loadNewList();
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            '$route': 'loadNewList',
            selectValue: function (val) {//过滤触发
                var querys = {
                    page: this.currentPage,
                    rows: this.pageSize
                }
                if (val) {
                    querys.id = this.selectValue;

                }
                window.router.push({
                    path: "/new/list/",
                    query: querys
                })
            }
        }
    }
</script>